<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>SQL formatter</title>
    <meta name="description" content="A whitespace formatter for different query languages" />

    <meta property="og:title" content="SQL Formatter" />
    <meta
      property="og:description"
      content="A whitespace formatter for different query languages"
    />
    <meta property="og:url" content="https://zeroturnaround.github.io/sql-formatter" />

    <link rel="shortcut icon" href="https://static.zeroturnaround.com/theme55/images/favicon.ico" />

    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" />

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: 'Roboto Mono', monospace;
      }
      header {
        position: relative;
        height: 120px;
        padding: 10px 20px;
        border-bottom: 2px solid #8dc63f;
        box-sizing: border-box;
      }
      .select-wrapper {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      h1 {
        margin: 0 0 8px 0;
      }
      a {
        text-decoration: none;
      }
      main {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        -webkit-align-items: stretch;
        align-items: stretch;
        height: calc(100% - 120px);
      }
      .input,
      .output {
        display: flex;
        -webkit-align-items: stretch;
        align-items: stretch;
        width: 50%;
        height: 100%;
      }
      .output {
        border-left: 2px solid #8dc63f;
      }
      textarea {
        width: 100%;
        padding: 20px;
        border: 0;
        box-sizing: border-box;
        font-size: 1.3em;
        resize: none;
        outline: none;
        line-height: 1.3;
        font-family: 'Roboto Mono', monospace;
      }
    </style>
  </head>

  <body>
    <header>
      <h1>SQL Formatter</h1>

      <div class="buttons">
        <a href="https://www.npmjs.com/package/sql-formatter">
          <img src="https://img.shields.io/npm/v/sql-formatter.svg" height="18" />
        </a>
        <iframe
          src="https://ghbtns.com/github-btn.html?user=zeroturnaround&repo=sql-formatter&type=star&count=true"
          frameborder="0"
          scrolling="0"
          width="120px"
          height="20px"
          style="position: relative; top: 1px"
        ></iframe>
      </div>

      <div class="select-wrapper">
        <label for="lanugage">Format</label>
        <select id="language">
          <option value="sql">SQL</option>
          <!-- dialects -->
          <option value="redshift">AWS Redshift</option>
          <option value="db2">DB2</option>
          <option value="mariadb">MariaDB</option>
          <option value="mysql">MySQL</option>
          <option value="n1ql">N1QL</option>
          <option value="plsql">PL/SQL</option>
          <option value="postgresql">PostgreSQL</option>
          <option value="spark">Spark</option>
          <option value="tsql">Transact-SQL</option>
        </select>
        |
        <label for="uppercase">Uppercase</label>
        <input type="checkbox" id="uppercase" name="uppercase" checked />
      </div>
    </header>
    <main>
      <section class="input">
        <textarea id="input" autofocus="true" wrap="off">
select supplier_name,city from
(select * from suppliers join addresses on suppliers.address_id=addresses.id)
as suppliers
where supplier_id>500
order by supplier_name asc,city desc;
      </textarea
        >
      </section>
      <section class="output">
        <textarea id="output" readonly="true" wrap="off"></textarea>
      </section>
    </main>

    <!-- Load from local (for development) -->
    <script type="text/javascript" src="dist/sql-formatter.js"></script>
    <!-- Fallback to reading from npm -->
    <script>
      window.sqlFormatter ||
        document.write(
          unescape(
            '%3Cscript type="text/javascript" src="https://unpkg.com/sql-formatter@latest/dist/sql-formatter.min.js"%3E%3C/script%3E'
          )
        );
    </script>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        let language = document.getElementById('language');
        let uppercase = document.getElementById('uppercase');
        let input = document.getElementById('input');
        let output = document.getElementById('output');

        function format() {
          console.time('formatting');
          output.value = sqlFormatter.format(input.value, {
            language: language.options[language.selectedIndex].value,
            uppercase: uppercase.checked,
          });
          console.timeEnd('formatting');
        }

        input.addEventListener('input', format);
        language.addEventListener('change', format);
        uppercase.addEventListener('change', format);

        format();
      });
    </script>
  </body>
</html>
